<script setup lang="ts">
defineOptions({
  name: "gasBoardBarItem"
});

import { ref, nextTick, defineAsyncComponent, onMounted } from "vue";
import { useInitBarEcharts } from "./hooks";

const echartsCom = defineAsyncComponent(() => import("@/views/common/components/echartsCom/index.vue"));

const props = withDefaults(defineProps<{ data?: Record<string, any>; line?: boolean; dark?: boolean }>(), {
  data: null,
  line: false,
  dark: false
});

const echartsComRef = ref<InstanceType<typeof echartsCom> | null>(null);
const echartsOptions = ref<CommonEcharts.CommonEchartsOption | null>(null);
const loading = ref<boolean>(false);

const init = async () => {
  loading.value = true;
  useInitBarEcharts(props.data, props.line, async data => {
    echartsOptions.value = data;
    await nextTick();
    loading.value = false;
  });
};

init();

// onMounted(async () => {
//   await init();
// });
</script>

<template>
  <div :class="['gas-board-line-item', dark ? 'gas-board-line-item-dark' : '']">
    <!-- <div class="line-item-title">{{ `${data?.name}${data?.unit ? "（" + data?.unit + "）" : ""}` }}</div> -->
    <div class="line-item-echarts">
      <Suspense>
        <template #fallback>
          <div v-loading="true" class="echarts-fallback" />
        </template>
        <template #default>
          <div class="echarts-content">
            <echartsCom ref="echartsComRef" :dark="dark" :options="echartsOptions" />
          </div>
        </template>
      </Suspense>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.gas-board-line-item {
  width: 100%;
  height: 100%;
  background-color: transparent;
  border-radius: 4px;

  .line-item-title {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 24px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: #333;
    text-align: center;
  }

  .line-item-echarts {
    width: 100%;
    // height: calc(100% - 24px);
    height: 100%;

    .echarts-fallback {
      width: 100%;
      height: 100%;
    }

    .echarts-content {
      width: 100%;
      height: 100%;
    }
  }
}

// .gas-board-line-item-dark {
//   color: #fff;
//   background-color: #001e3bff;
//   border: 1px solid #83b2ffff;
//   box-shadow: inset 0 0 10px 0 #83b2ffff;

//   .line-item-title {
//     color: #fff;
//   }
// }
</style>
